<template>
	<view>
		<view class="header-common">
			<view class="header-common-bg" :style="{'background':bg,'opacity':opacity}"></view>
			<view class="header-common-con flex-ac-jb" :style="{'color':color}">
				<view class="header-left" @tap="goBack">
					<image v-if="pages>1" class="header-left-line" src="../../static/login/header_line.png"
						mode="widthFix" style="height: auto;"></image>
				</view>
				<view class="header-title bold f32">
					<text>{{title}}</text>
				</view>
				<view class="header-right flex-ac">
					<view class="btn bgfff cblue f22" @tap="showMenu" v-if="showBtn.includes('size')">
						选择尺寸
					</view>
					<view class="gui-icons" @tap="rigthIconClick('set')" v-if="showBtn.includes('set')">&#xe613;</view>
				</view>
			</view>
			<view class="sizeMenu">
				<gui-popup-menu ref="gracePopupMenu" menuWidth="180rpx" arrowDirection="center">
					<view class="gui-bg-white radius10">
						<text class="menus gui-block-text center" v-for="item in menu" :key="item.id"
							:class="{'cblue':menuId==item.id,'bold':menuId==item.id}" @tap.stop="sizeChange"
							:data-id="item.id">{{item.name}}</text>
					</view>
				</gui-popup-menu>
			</view>
		</view>
		<view class="header-place" v-if="isShowPlace"></view>
	</view>
</template>

<script>
	export default {
		name: "gui-a-header",
		props: {
			title: String,
			isShowPlace: {
				type: Boolean,
				default: true
			},
			bg: {
				type: String,
				// transparent
				// default: 'linear-gradient( 180deg, #1890FF 0%, #25B6E3 100%)'
				default: '#0087FF'
			},
			color: {
				type: String,
				default: '#fff'
			},
			opacity: {
				type: [String, Number],
				default: 1
			},
			showBtn: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				pages: getCurrentPages().length,
				menu: [{
					id: 1,
					name: '大'
				}, {
					id: 2,
					name: '中'
				}, {
					id: 3,
					name: '小'
				}, {
					id: 4,
					name: '超小'
				}],
				menuId: 1
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			rigthIconClick(e) {
				this.$emit('rigthIconClick', e)
			},
			showMenu: function() {
				this.$refs.gracePopupMenu.setRight(20);
				this.$refs.gracePopupMenu.open();
			},
			sizeChange(e) {
				this.menuId = e.currentTarget.dataset.id;
				uni.showToast({
					title: '您点击了菜单 : ' + this.menuId,
					icon: "none"
				});
				this.$refs.gracePopupMenu.close();
			}
		}
	}
</script>

<style lang="less">
	.header-place {
		height: 100rpx;
	}

	.header-common {
		height: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;

		.header-common-bg {
			width: 100%;
			height: 100%;
			transition: all .2s;
		}

		.header-common-con {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 100%;
			z-index: 10;

			.header-left {
				width: 200rpx;
				padding-left: 40rpx;

				.header-left-line {
					width: 55rpx;
				}
			}

			.header-right {
				width: 200rpx;

				view {
					margin-left: 15rpx;
				}

				.btn {
					padding: 5rpx 16rpx;
					border-radius: 34rpx;
				}
			}
		}
	}

	.menus {
		line-height: 88rpx;
	}
</style>